Vue.component('xcform_control_input_subtable', {
    template: '<el-form-item \
                  :class="value.fieldjsonObj.xcform_prop_required.value?\'required\':\'\'"\
                  :prop="value.fieldcode" \
                  :rules="control.rules"\
                  :label="value.fieldtitle"> \
                  <el-table ref="multipleTable" style=" width: 100%;" :data="control.tableData" @selection-change="handleSelectionChange"> \
                    <el-table-column type="selection" width="55" align="center"></el-table-column> \
                    <template v-for="(item, index) in sr.xcfieldjsonObj"> \
                        <template v-for="item2 in value.fieldjsonObj.xcform_base_property_input_subtable.showfields"> \
                            <el-table-column align="center" v-if="item.fieldcode==item2" :prop="item.fieldcode" :label="item.title" width="180">\
                                <template slot-scope="scope">\
                                    <component :is="item.fieldtag" :ref="item.fieldcode" :xcform_id="item.xcform_id" :value="scope.row[index]" :fieldfulljson="scope.row" :disabled="control.disabled"></component> \
                                </template> \
                            </el-table-column> \
                        </template> \
                    </template> \
                  </el-table> \
                  <el-row> \
                      <el-button type="primary" size="mini" @click="control_clickNew" v-if="!control.disabled">新增</el-button> \
                      <el-button size="mini" @click="control_clickDel" v-if="!control.disabled">删除</el-button> \
                  </el-row> \
                </el-form-item>',
    props: {
        value: {
            type: Object,
        },
        disabled: {
            type: Boolean,
        },
        fieldfulljson: {
            type: Array,
        },
        xcform_id: {
            type: Number,
        }
    },
    watch: {
        // form table_datalist from control.tableData(with xcfullfieldjsonObj_array)
        'control.tableData': {
            handler(newVal, oldVal) {
                var that = this;
                var list = [];
                for (var index in that.control.tableData) {
                    var xcfullfieldjsonObj = that.control.tableData[index];
                    var item = {};
                    for (var index2 in xcfullfieldjsonObj) {
                        var field = xcfullfieldjsonObj[index2];
                        item[field['fieldcode']] = field['value'];
                    }
                    list.push(item);
                }
                that.value.value = list;
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        var validateFunction = (rule, value, callback) => {
            var that = this;
            that.value.value = (that.value.value) ? that.value.value : [];

            if (that.value.fieldjsonObj.xcform_prop_required.value) {
                if (that.value.value == null || that.value.value == '' || that.value.value.length == 0) {
                    return callback(new Error('不能为空'));
                }
            }

            return callback();
        };
        return {
            sr: {
                xcfieldjsonObj: [],
                //list: []
            },
            control: {
                disabled: false,
                rules: [{
                    validator: validateFunction,
                    trigger: 'blur'
                }],
                selectedRows: [],
                tableData: []
            }
        };
    },
    created() {
        var that = this;
        that.control.disabled = that.disabled;
        if (that.value.fieldjsonObj.xcform_prop_readonly.value) {
            that.control.disabled = true;
        }
    },
    mounted() {
        var that = this;
        that.xinit();
    },
    methods: {
        xinit: function () {
            var that = this;
            Fast.api.ajax({
                url: Fast.api.fixurl(Config.controlPath + "queryRelateSubTableFieldsAndDatasByFieldcode"),
                type: "get",
                data: {
                    id: Config.id,
                    xcform_id: that.xcform_id,
                    fieldcode: that.value.fieldcode,
                },
            }, function (res) {
                that.sr.xcfieldjsonObj = res.xcfieldjsonObj;
                that.control.tableData = res.list;
                return false;
            });
        },
        handleSelectionChange(val) {
            var that = this;
            that.control.selectedRows = val;
        },
        deepClone: function (obj) {
            var hash = new WeakMap();
            if (obj === null) return null;
            if (obj instanceof Date) return new Date(obj);
            if (obj instanceof RegExp) return new RegExp(obj);
            if (typeof obj !== 'object') return obj;
            if (hash.has(obj)) return hash.get(obj);

            let cloneObj = new obj.constructor();
            hash.set(obj, cloneObj);

            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    cloneObj[key] = deepClone(obj[key], hash);
                }
            }
            return cloneObj;
        },
        control_clickNew: function () {
            var that = this;
            var newXcfieldjsonObj = JSON.parse(JSON.stringify(that.sr.xcfieldjsonObj));
            // var newXcfieldjsonObj = that.deepClone(that.sr.xcfieldjsonObj);
            // // var newXcfieldjsonObj = {...that.sr.xcfieldjsonObj};
            // var newXcfieldjsonObj = Object.assign({}, that.sr.xcfieldjsonObj);
            console.log(newXcfieldjsonObj);
            that.control.tableData.push(newXcfieldjsonObj);
        },

        control_clickDel: function () {
            var that = this;
            if (that.control.selectedRows.length === 0) {
                that.$message({
                    type: 'warning',
                    message: '请先选择要删除的行'
                });
                return;
            }
            // 从表格数据中删除选中的行
            that.control.selectedRows.forEach(row => {
                const index = this.control.tableData.indexOf(row);
                if (index !== -1) {
                    that.control.tableData.splice(index, 1);
                }
            });
            // 清除选中状态
            that.$refs.multipleTable.clearSelection();
        }
    }
});